<template>
    <view class="">
        <view class="header-box">
            <view class="back"
                  @click="back"
                  :style="{top:H+'px'}">
                <u-icon name="arrow-left"
                        color="#ffffff"
                        size="45"></u-icon>
            </view>
            <image src="../../../static/images/kstj_pic_jxyb@2x.png"
                   mode=""
                   class="heard"></image>
            <view class="ls-f-ac user">
                <image :src="teacher.icon"
                       mode="aspectFill"
                       class="heard-img"></image>
                <view class="name">
                    {{teacher.name||""}}
                </view>
            </view>
        </view>
        <view class="conten">
            <view class="ls-f-ac">
                <image src="../../../static/images/common_icon_time@2x.png"
                       mode=""
                       class="ic"></image>
                <view class="ft">本月教学课时</view>
            </view>
            <view class="ls-f-ac center-text">
                <text>本月总计教学</text>
                <text class="ke">{{arr.statistics||0}}</text>
                <text>课时，继续加油哦！</text>
            </view>
            <view class="ls-f-ac">
                <image src="../../../static/images/common_icon_cishu@2x.png"
                       mode=""
                       class="ic"></image>
                <view class="ft">本月请假代课</view>
            </view>
            <view class="ls-f-ac center-text">
                <text>本月总计请假</text>
                <text class="ke">{{arr.leaves||0}}</text>
                <text>次,代课</text>
                <text class="ke">{{arr.taskClasss||0}}</text>
                <text>次</text>
            </view>
            <view class="bottom">

                <view class="ls-f-ajsb count">
                    <view class="ls-f-column ls-f-ac">
                        <view class="number">{{arr.statistics||0}}</view>
                        <view class="count-time">共教学课时</view>
                    </view>
                    <view class="ls-f-column ls-f-ac">
                        <view class="number">{{arr.leaves||0}}</view>
                        <view class="count-time">请假次数</view>
                    </view>
                    <view class="ls-f-column ls-f-ac">
                        <view class="number">{{arr.taskClasss||0}}</view>
                        <view class="count-time">代课次数</view>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
export default {
    data() {
        return {
            H: 20,
            teacher: {},
            arr: []
        }
    },
    onLoad(option) {
        this.H = uni.getMenuButtonBoundingClientRect().top + 3
        console.log(this.H);
        this.arr = JSON.parse(option.item);
        this.init()
    },
    methods: {
        init() {
            this.$api.getTeacherInfo({}, res => {
                console.log(res.data);
                this.teacher = res.data

            })
        },
        back() {
            uni.navigateBack({

            })
        }
    }
}
</script>

<style scoped lang="scss">
.bottom {
    padding: 16rpx;
    width: 622rpx;

    background: #f5f5f5;
    margin-top: 20rpx;
    border-radius: 16rpx;
    .count {
        padding: 32rpx 32rpx;
    }
    .number {
        color: #333333;
        font-size: 48rpx;
        font-weight: bold;
    }
}

.ke {
    color: #63b9f2;
    font-size: 36rpx;
    font-weight: bold;
    margin: 0 5rpx;
}
.center-text {
    color: #333333;
    font-size: 24rpx;
    margin-top: 20rpx;
    margin-bottom: 60rpx;
}
.ic {
    width: 32rpx;
    height: 32rpx;
    margin-right: 7rpx;
}
.ft {
    color: #333333;
    font-size: 28rpx;
}
.user {
    position: absolute;
    bottom: 57rpx;
    left: 75rpx;
}
.heard-img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}
.name {
    font-size: 40rpx;
    font-weight: bold;
}
.conten {
    padding-top: 45rpx !important;
    padding: 40rpx;
    margin-left: 33rpx;
    width: 686rpx;

    background: #ffffff;
    border-radius: 0px 0px 32rpx 32rpx;
    margin-top: -10rpx;
}
.header-box {
    position: relative;
}
.heard {
    width: 750rpx;
    height: 662rpx;
}
.back {
    left: 20rpx;
    top: 0rpx;
    position: absolute;
}
</style>
